<template>
    <div class="page">
        <el-card shadow="never">
            <div class="mb-4">勋章课程小节列表</div>
            <el-button type="primary" @click="onAddClick">新增</el-button>
            <el-button @click="$router.back()">返回</el-button>
            <div class="mt-4" v-loading="loading">
                <el-table :data="data">
                    <el-table-column label="课程小节名称" prop="name"/>
                    <el-table-column label="课程类型">
                        <template slot-scope="{row}">
                            {{ row.type === 1 ? '视频' : '文章' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="上下架状态">
                        <template slot-scope="{row}">
                            {{ row.is_shelf ? '已上架' : '下架' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="创建时间">
                        <template slot-scope="{row}">
                            {{ row.created_at | formatTime }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="{row}">
                            <el-button type="text" @click="onStatusClick(row)">
                                {{ row.is_shelf ? '下架' : '上架' }}课程小节
                            </el-button>
                            <el-button type="text" @click="onAddClick(row)">编辑</el-button>
                            <el-button type="danger" @click="onDeleteClick(row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div v-if="totalElements > 0" class="footer mt-4 text-center">
                <el-pagination
                    class="center"
                    @size-change="fetchData"
                    @current-change="fetchData"
                    :current-page.sync="form.page"
                    :page-size.sync="form.size"
                    :page-sizes="[10, 25, 50]"
                    layout="total, prev, pager, next, sizes, jumper"
                    :total="totalElements">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>

export default {
    components: {
    },
    mixins: [require('@/mixins/CacheQuery').default],
    data() {
        return {
            loading: false,
            data: [],
            form: {
                page: 1,
                size: 25,
                meritChapterId: '',
            },
            totalElements: 0,
        };
    },
    methods: {
        onSubmit() {
            this.form.page = 1;
            this.fetchData();
        },

        onResetFilters() {
            this.$refs.form.resetFields();
        },

        fetchData() {
            this.loading = true;
            API.get('merit_section/page', { params: this.form }).then((res) => {
                this.data = res.content;
                this.totalElements = res.pagination.total;
            }).finally(() => this.loading = false);
        },

        onAddClick(row) {
            const params = row && row.id ? { id: row.id } : undefined;
            if (params && row.is_shelf) return $ele.$message.warning('请先下架勋章课程小节');
            this.$router.push({
                name: 'Medal.Section.Form',
                query: {
                    chapterid: this.form.meritChapterId,
                },
                params,
            });
        },

        onStatusClick(row) {
            this.loading = true;
            API.put(`merit_section/shelf/${row.id}`).then(() => {
                this.fetchData();
                $ele.$message.success('操作成功');
            }).finally(() => this.loading = false);
        },

        onDeleteClick(row) {
            $ele.$confirm('是否删除此勋章课程小节？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                this.loading = true;
                API.delete(`merit_section/${row.id}`).then(() => {
                    this.fetchData();
                    $ele.$message.success('删除成功');
                }).finally(() => this.loading = false);
            }).catch();
        },
    },
    mounted() {
        this.form.meritChapterId = this.$route.query.id;
        this.fetchData();
    },
};
</script>

<style lang="scss" scoped>
.page {
    .input-width {
        max-width: 300px;
    }
}
</style>
